<template>
  <!-- 文章页面 -->
  <el-container>
    <!-- 顶部导航栏 -->
    <div>
      <el-header style="height: 75px">
        <el-page-header @back="goBack" content="详情页面"></el-page-header>
        <el-button
          v-if="isUsername"
          type="primary"
          round
          icon="el-icon-s-custom"
          style="margin-right: -1300px; font-size: 20px"
          @click="handleDialogVisible"
        >
          <el-dropdown>
            <span class="el-dropdown-link">
              {{ isUsername }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="loginOut">注销</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-button>
        <el-button
          v-else
          type="primary"
          round
          icon="el-icon-s-custom"
          style="margin-right: -1300px; font-size: 20px"
          @click="handleDialogVisible"
          >用户登录</el-button
        >
      </el-header>
    </div>

    <!-- 中间的文章块 -->
    <div class="my-main">
      <el-container class="text">
        <el-main style="height: 800px; margin: 0 200px">
          <div>
            <div>
              <span style="font-size: 50px">{{
                articleData.articleTitle
              }}</span>
            </div>
            <div>
              <span style="margin-top: 500px">
                发布日期:{{ articleData.createTime }}点赞:{{
                  articleData.articleLikeCount
                }}
                浏览:{{ articleData.articleViewCount }} 评论:{{
                  articleData.articleCommentCount
                }}
              </span>
            </div>
            <tr>
              <div v-html="articleData.articleContent"></div>
            </tr>
          </div>
        </el-main>
      </el-container>
    </div>

    <!-- 底部组件 -->
    <el-footer>
      <el-container>
        <!-- 发表评论的 -->
        <el-main class="comment-f" style="height: 500px">
          <el-input
            style="width: 800px; margin-top: 260px"
            placeholder="请输入评论："
            v-model="articleCommentForm.articleCommentContent"
          ></el-input>
          <el-button
            class="publish"
            type="primary"
            style="margin-top: 270px"
            @click="publishComment"
            >发表评论<i class="el-icon-upload el-icon--right"></i
          ></el-button>

          <!-- 评论的卡片 -->
          <el-card class="box-card">
            <div class="text item">
              <tr
                style="display: flex; justify-content: center"
                v-if="articleComments == ''"
              >
                暂无评论
              </tr>
              <tr
                v-for="(item, index) in articleComments"
                :key="index"
                v-else
                style="display: flex; justify-content: space-between"
              >
                <td>{{ item.userName }}说:{{ item.articleComment }}</td>
                {{
                  isDelete
                }}
                <td v-if="item.userName == isUsername">
                  {{ item.createTime }}
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="handleDelete(item.commentId)"
                    >删除</el-link
                  >
                </td>
              </tr>
            </div>
          </el-card>

          <!-- 赞一下踩一下的按钮 -->
          <el-row class="Press">
            <el-button type="success" @click="handleLike(articleData.articleId)"
              >赞一下({{ articleData.articleLikeCount }})</el-button
            >
            <el-button type="warning" @click="handleLow(articleData.articleId)"
              >踩一下({{ articleData.articleLowCount }})</el-button
            >
          </el-row>

          <!-- 使用low组件 也就是备案号的组件 -->
          <div class="last">
            <Low></Low>
          </div>
        </el-main>
      </el-container>
    </el-footer>

    <!-- 用户点击登录弹的模态框 -->
    <el-dialog title="Login" :visible.sync="dialogVisible" width="30%" center>
      <el-form
        :model="loginForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            type="text"
            v-model="loginForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item class="loginAn">
          <el-button type="primary" @click="submitForm">登录</el-button>
        </el-form-item>
        <el-link type="primary" @click="register">这个是一个注册链接?</el-link>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
import marked from "marked";
import { postLoginGetToken } from "../api/users";
import {
  postArticleComments,
  postArticleCommentContent,
  deleteArticleById,
} from "../api/index";
import Low from "./low.vue";
import {
  GetArticleById,
  postGiveArticleLike,
  postGiveArticleLow,
} from "../api/index";
export default {
  components: {
    Low,
  },
  mounted() {
    let articleId = this.$route.query.articleId;
    localStorage.setItem("articleId", articleId);
    this.loadArticleById(articleId);
  },
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
      },
      // 文章信息
      articleData: [],
      // 文章的评论
      articleComments: [],
      // 点赞与踩一下
      likeLowForm: {
        userId: "",
        articleId: "",
        token: "",
      },
      // 打开登录框的
      dialogVisible: false,
      // 设置用户名
      isUsername: localStorage.getItem("username"),
      // 发表评论需要的值
      articleCommentForm: {
        userId: 0,
        // 评论的内容
        articleCommentContent: "",
        token: "",
      },
      isDelete: "",
    };
  },
  methods: {
    // 删除
    handleDelete(commentId) {
      deleteArticleById(commentId).then(({ data }) => {
        // console.log(data);
        if (data.code === 200) {
          let articleId = localStorage.getItem("articleId");
          this.loadArticleById(articleId);
          this.$message({
            type: "success",
            message: data.msg,
          });
        } else {
          this.$message.error();
        }
      });
    },
    // 登出
    loginOut() {
      localStorage.removeItem("token");
      localStorage.removeItem("id");
      localStorage.removeItem("username");
      localStorage.removeItem("isAdmin");
      let articleId = localStorage.getItem("articleId");
      this.isDelete = "";
      GetArticleById(articleId)
        .then(({ data }) => {
          // console.log(data);
          this.articleData = data.data;
          this.isUsername = "";
          this.loginForm.username = "";
          this.loginForm.password = "";
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 注册按钮
    register() {
      this.$router.push("/register");
    },
    // 登录按钮
    submitForm() {
      postLoginGetToken(this.loginForm)
        .then(({ data }) => {
          if (data.code == 200) {
            var articleId = localStorage.getItem("articleId");
            // console.log(data.data);
            // console.log(articleId);
            localStorage.setItem("token", data.data.token);
            localStorage.setItem("id", data.data.data.id);
            localStorage.setItem("username", data.data.data.username);
            localStorage.setItem("isAdmin", data.data.data.isAdmina);
            this.isUsername = localStorage.getItem("username");
            this.loginForm.username = "";
            this.loginForm.password = "";
            GetArticleById(articleId)
              .then(({ data }) => {
                this.articleData = data.data;
              })
              .catch((err) => {
                console.log(err);
              });
            postArticleComments(articleId)
              .then(({ data }) => {
                this.articleComments = data.data;
              })
              .catch((err) => {
                console.log(err);
              });
            this.dialogVisible = false;
            this.$message({
              type: "success",
              message: data.msg,
            });
          } else {
            this.$message.error(data.msg);
          }
          console.log(data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 打开登录模态框
    handleDialogVisible() {
      this.dialogVisible = true;
    },
    // 返回首页
    goBack() {
      localStorage.removeItem("articleId");
      this.$router.push("/index");
    },
    // 发表评论
    publishComment() {
      this.articleCommentForm.token = localStorage.getItem("token");
      this.articleCommentForm.userId = localStorage.getItem("id");
      var articleId = localStorage.getItem("articleId");
      if (this.articleCommentForm.token != null) {
        postArticleCommentContent(articleId, this.articleCommentForm)
          .then(({ data }) => {
            console.log(data);
            if (data.code === 200) {
              postArticleComments(articleId)
                .then(({ data }) => {
                  // console.log(data);
                  this.articleComments = data.data;
                })
                .catch((err) => {
                  console.log(err);
                });
              this.$message({
                message: data.msg,
                type: "success",
              });
              this.articleCommentForm.articleCommentContent = "";
            } else {
              this.$message.error(data.msg);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$message.error("请先登录");
        this.dialogVisible = true;
      }
    },
    // 点赞
    handleLike() {
      // console.log(articleId);
      this.likeLowForm.userId = localStorage.getItem("id");
      this.likeLowForm.articleId = this.$route.query.articleId;
      this.likeLowForm.token = localStorage.getItem("token");
      console.log(this.likeLowForm);
      if (this.likeLowForm.userId === null) {
        this.$message.error("需要登录才能点赞哦");
        this.dialogVisible = true;
      } else {
        postGiveArticleLike(this.likeLowForm)
          .then(({ data }) => {
            console.log(data.data);
            if (data.code === 200) {
              this.loadArticleById(this.likeLowForm.articleId);
              this.$message({
                type: "success",
                message: data.msg,
              });
            } else {
              this.$message.error(data.msg);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      }
    },
    // 踩一下
    handleLow() {
      // console.log(articleId);
      this.likeLowForm.userId = localStorage.getItem("id");
      this.likeLowForm.articleId = this.$route.query.articleId;
      this.likeLowForm.token = localStorage.getItem("token");
      if (this.likeLowForm.userId === null) {
        this.$message.error("需要登录才能踩一下哦");
        this.dialogVisible = true;
      } else {
        postGiveArticleLow(this.likeLowForm)
          .then(({ data }) => {
            if (data.code === 200) {
              this.loadArticleById(this.likeLowForm.articleId);
              this.$message({
                type: "success",
                message: data.msg,
              });
            } else {
              this.$message.error(data.msg);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      }
    },
    // 用加载页面或者刷新页面使用的方法 封装一下
    loadArticleById(articleId) {
      GetArticleById(articleId)
        .then(({ data }) => {
          // console.log(data);
          var markdowncontent = data.data.articleContent;
          data.data.articleContent = marked(markdowncontent);
          this.articleData = data.data;
        })
        .catch((err) => {
          console.log(err);
        });
      postArticleComments(articleId)
        .then(({ data }) => {
          // console.log(data);
          this.articleComments = data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>


<style scoped>
.loginAn {
  margin-right: 70px;
  display: flex;
  justify-content: center;
}
/* scoped是设置这个页面样式的唯一性 不会影响到其他页面的同名样式 */
/* 最大的容器的样式 */
.el-container {
  background-color: rgb(255, 245, 234);
}

/* 左右方块设置 */
.aside-left {
  width: 200px !important;
}

.aside-right {
  width: 200px !important;
}

/* 头部容器样式 */
.el-header {
  color: #333;
  text-align: center;
  line-height: 60px;
}

/* 文章样式 */
.el-main {
  background-color: #fffff4;
  color: #333;
  text-align: center;
  line-height: 60px;
  width: 1015px;
  display: flex;
  justify-content: center;
}

/* 头部样式 */
.el-page-header {
  margin-top: 20px;
}

/* 底部样式 */
.el-footer {
  padding: 0 !important;
  background-color: #ffe0d6;
  color: #333;
  text-align: center;
  line-height: 60px;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  height: 400px;
  /* width: 850px; */
  /* margin: 0 300px; */
}

/* 发表评论按钮的样式 */
.publish {
  height: 40px;
  margin-top: 10px;
  margin-left: 20px;
}

/* main整体 */
.comment-f {
  position: relative;
}

/* 评论卡片的样式 */
.box-card {
  /* width: 900px; */
  position: absolute;
  left: 50%;
  margin-left: -500px;
  height: 200px;
  top: 70px;
  width: 1000px;
  max-width: 1000px;
}

/* 赞一下踩一下按钮的样式 */
.Press {
  position: absolute;
  left: 1000px;
  top: 0px;
}

/* 备案号样式 */
.last {
  position: absolute;
  bottom: 0px;
}
/* 设置文章评论卡片的滚动条 */
.el-card,
.el-message {
  overflow: auto;
}
/* 设置评论样式 */
tr {
  text-align: left;
}
</style>
